<template>
  <div class="disc">
    <div class="g-bd">
      <div class="g-wrap">
        <!-- 热门新碟 -->
        <div class="t-box">
          <div class="t-title">
            <h3>热门新碟</h3>
          </div>
          <ul class="m-cvrlst">
            <li v-for="newdisc in newdiscList" :key="newdisc.id">
              <div class="u-cover">
                <router-link :to="`/detaildisc?id=${newdisc.id}`"
                  ><img :src="newdisc.blurPicUrl" alt="" width="100%"
                /></router-link>
              </div>
              <p class="dec">
                <a href="">{{ newdisc.name }}</a>
              </p>
              <p class="f-thide">
                <a href="" class="nm">{{ newdisc.artist.name }}</a>
              </p>
            </li>
          </ul>
        </div>
        <!-- 全部新碟 -->
        <div class="t-box">
          <div class="t-title">
            <h3>全部新碟</h3>
            <div class="tab">
              <a href="">全部</a>
              <span class="line">|</span>
              <a href="">华语</a>
              <span class="line">|</span>
              <a href="">欧美</a>
              <span class="line">|</span>
              <a href="">韩国</a>
              <span class="line">|</span>
              <a href="">日本</a>
            </div>
          </div>
          <ul class="m-cvrlst">
            <li v-for="allNewdisc in allNewdiscList" :key="allNewdisc.id">
              <div class="u-cover">
                <router-link :to="`/detaildisc?id=${allNewdisc.id}`"
                  ><img :src="allNewdisc.blurPicUrl" alt="" width="100%"
                /></router-link>
              </div>
              <p class="dec">
                <a href="">{{ allNewdisc.name }}</a>
              </p>
              <p class="f-thide">
                <a href="" class="nm">{{ allNewdisc.artists[0].name }}</a
                ><span v-if="allNewdisc.artists.length === 2">
                  &nbsp;/&nbsp;<a href="" class="nm">{{
                    allNewdisc.artists[1].name
                  }}</a></span
                >
              </p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { reqNewdiscList } from '@/api/index.js'
// import { getNewdiscListData } from '@/stores/index.js'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'Newdisc',
  data() {
    return {}
  },
  computed: {
    ...mapState('newdisc', ['newdiscList', 'allNewdiscList']),
  },
  methods: {
    ...mapActions('newdisc', ['getNewdiscListData', 'getAllNewdiscListData']),
  },

  mounted() {
    // const result = reqNewdiscList()
    // console.log(result)
    // this.$store.dispatch('newdisc/getNewdiscListData')
    this.getNewdiscListData()
    this.getAllNewdiscListData({ page: 1, limit: 35, area: 'ALL' })
  },
}
</script>

<style lang="less" scoped>
.disc {
  // height: 1000px;
  overflow: hidden;
  background-color: #f2f2f2;

  .g-bd {
    width: 982px;
    // height: 1000px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    text-align: center;
    border-width: 0 1px;
    .g-wrap {
      position: relative;
      width: 980px;
      // height: 1000px;
      padding: 42px;
      .t-box {
        // height: 700px;
        overflow: hidden;
        .t-title {
          width: 900px;
          height: 40px;
          border-bottom: 2px solid red;
          .tab {
            float: left;
            margin: -20px 0 0 115px;
            .line {
              margin: 0 10px;
            }
          }
          h3 {
            font-size: 24px;
            font-weight: normal;
            text-align: left;
          }
        }
        .m-cvrlst {
          // display: block;
          margin: 20px 0 0 -33px;

          li {
            float: left;
            width: 153px;
            height: 178px;
            // display: inline-block;
            padding: 0 0 30px 50px;
            padding-left: 33px;
            .u-cover {
              width: 130px;
              height: 130px;
              padding: 0;
              margin: 0;
            }
            .dec {
              text-align: left;
              margin: 8px 0 3px;
              height: 20px;
              overflow: hidden;
              a {
                font-size: 14px;
                color: #000;
              }
            }
            .f-thide {
              text-align: left;
              a {
                font-size: 12px;
                font-family: Arial, Helvetica, sans-serif;
              }
            }
          }
        }
      }
    }
  }
}
</style>
